"use client";
import { useTranslation } from "react-i18next";
import { useEffect, useRef, useState } from "react";
import {
  RiBrain2Fill,
  RiBrain2Line,
  RiCloseLine,
  RiColorFilterFill,
  RiColorFilterLine,
  RiDatabase2Fill,
  RiDatabase2Line,
  RiGroup2Fill,
  RiGroup2Line,
  RiMoneyDollarCircleFill,
  RiMoneyDollarCircleLine,
  RiPuzzle2Fill,
  RiPuzzle2Line,
} from "@remixicon/react";
import Button from "../../base/button";
import MembersPage from "./members-page";
import LanguagePage from "./language-page";
import ApiBasedExtensionPage from "./api-based-extension-page";
import DataSourcePage from "./data-source-page";
import ModelProviderPage from "./model-provider-page";
import cn from "@/utils/classnames";
import BillingPage from "@/app/components/billing/billing-page";
import CustomPage from "@/app/components/custom/custom-page";
import useBreakpoints, { MediaType } from "@/hooks/use-breakpoints";
import { useProviderContext } from "@/context/provider-context";
import { useAppContext } from "@/context/app-context";
import MenuDialog from "@/app/components/header/account-setting/menu-dialog";
import Input from "@/app/components/base/input";

const iconClassName = `
  w-5 h-5 mr-2
`;

type IAccountSettingProps = {
  onCancel: () => void;
  activeTab?: string;
};

type GroupItem = {
  key: string;
  name: string;
  description?: string;
  icon: React.JSX.Element;
  activeIcon: React.JSX.Element;
};

export default function AccountSetting({
  onCancel,
  activeTab = "members",
}: IAccountSettingProps) {
  const [activeMenu, setActiveMenu] = useState(activeTab);
  const { t } = useTranslation();
  const { enableBilling, enableReplaceWebAppLogo } = useProviderContext();
  const { isCurrentWorkspaceDatasetOperator } = useAppContext();

  const workplaceGroupItems = (() => {
    if (isCurrentWorkspaceDatasetOperator) return [];
    return [
      {
        key: "provider",
        name: t("common.settings.provider"),
        icon: <RiBrain2Line className={iconClassName} />,
        activeIcon: <RiBrain2Fill className={iconClassName} />,
      },
      {
        key: "members",
        name: t("common.settings.members"),
        icon: <RiGroup2Line className={iconClassName} />,
        activeIcon: <RiGroup2Fill className={iconClassName} />,
      },
      {
        // Use key false to hide this item
        key: enableBilling ? "billing" : false,
        name: t("common.settings.billing"),
        description: t("billing.plansCommon.receiptInfo"),
        icon: <RiMoneyDollarCircleLine className={iconClassName} />,
        activeIcon: <RiMoneyDollarCircleFill className={iconClassName} />,
      },
      {
        key: "data-source",
        name: t("common.settings.dataSource"),
        icon: <RiDatabase2Line className={iconClassName} />,
        activeIcon: <RiDatabase2Fill className={iconClassName} />,
      },
      {
        key: "api-based-extension",
        name: t("common.settings.apiBasedExtension"),
        icon: <RiPuzzle2Line className={iconClassName} />,
        activeIcon: <RiPuzzle2Fill className={iconClassName} />,
      },
      {
        key: enableReplaceWebAppLogo || enableBilling ? "custom" : false,
        name: t("custom.custom"),
        icon: <RiColorFilterLine className={iconClassName} />,
        activeIcon: <RiColorFilterFill className={iconClassName} />,
      },
    ].filter((item) => !!item.key) as GroupItem[];
  })();

  const media = useBreakpoints();
  const isMobile = media === MediaType.mobile;

  const menuItems = [
    {
      key: "workspace-group",
      name: t("common.settings.workplaceGroup"),
      items: workplaceGroupItems,
    },
    {
      key: "account-group",
      name: t("common.settings.generalGroup"),
      items: [],
    },
  ];
  const scrollRef = useRef<HTMLDivElement>(null);
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const targetElement = scrollRef.current;
    const scrollHandle = (e: Event) => {
      const userScrolled = (e.target as HTMLDivElement).scrollTop > 0;
      setScrolled(userScrolled);
    };
    targetElement?.addEventListener("scroll", scrollHandle);
    return () => {
      targetElement?.removeEventListener("scroll", scrollHandle);
    };
  }, []);

  const activeItem = [...menuItems[0].items, ...menuItems[1].items].find(
    (item) => item.key === activeMenu
  );

  const [searchValue, setSearchValue] = useState<string>("");

  return (
    <MenuDialog show onClose={onCancel}>
      <div className="mx-auto flex h-[100vh] max-w-[1048px]">
        <div className="flex w-[44px] flex-col border-r border-divider-burn pl-4 pr-6 sm:w-[224px]">
          <div className="title-2xl-semi-bold mb-8 mt-6 px-3 py-2 text-text-primary">
            {t("common.userProfile.settings")}
          </div>
          <div className="w-full">
            {menuItems.map((menuItem) => (
              <div key={menuItem.key} className="mb-2">
                {!isCurrentWorkspaceDatasetOperator && (
                  <div className="system-xs-medium-uppercase mb-0.5 py-2 pb-1 pl-3 text-text-tertiary">
                    {menuItem.name}
                  </div>
                )}
                <div>
                  {menuItem.items.map((item) => (
                    <div
                      key={item.key}
                      className={cn(
                        "mb-0.5 flex h-[37px] cursor-pointer items-center rounded-lg p-1 pl-3 text-sm",
                        activeMenu === item.key
                          ? "system-sm-semibold bg-state-base-active text-components-menu-item-text-active"
                          : "system-sm-medium text-components-menu-item-text"
                      )}
                      title={item.name}
                      onClick={() => setActiveMenu(item.key)}
                    >
                      {activeMenu === item.key ? item.activeIcon : item.icon}
                      {!isMobile && <div className="truncate">{item.name}</div>}
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
        <div className="relative flex w-[824px]">
          <div className="absolute -right-11 top-6 z-[9999] flex flex-col items-center">
            <Button
              variant="tertiary"
              size="large"
              className="px-2"
              onClick={onCancel}
            >
              <RiCloseLine className="h-5 w-5" />
            </Button>
            <div className="system-2xs-medium-uppercase mt-1 text-text-tertiary">
              ESC
            </div>
          </div>
          <div
            ref={scrollRef}
            className="w-full overflow-y-auto bg-components-panel-bg pb-4"
          >
            <div
              className={cn(
                "sticky top-0 z-20 mx-8 mb-[18px] flex items-center bg-components-panel-bg pb-2 pt-[27px]",
                scrolled && "border-b border-divider-regular"
              )}
            >
              <div className="title-2xl-semi-bold shrink-0 text-text-primary">
                {activeItem?.name}
                {activeItem?.description && (
                  <div className="system-sm-regular mt-1 text-text-tertiary">
                    {activeItem?.description}
                  </div>
                )}
              </div>
              {activeItem?.key === "provider" && (
                <div className="flex grow justify-end">
                  <Input
                    showLeftIcon
                    wrapperClassName="!w-[200px]"
                    className="!h-8 !text-[13px]"
                    onChange={(e) => setSearchValue(e.target.value)}
                    value={searchValue}
                  />
                </div>
              )}
            </div>
            <div className="px-4 pt-2 sm:px-8">
              {activeMenu === "provider" && (
                <ModelProviderPage searchText={searchValue} />
              )}
              {activeMenu === "members" && <MembersPage />}
              {activeMenu === "billing" && <BillingPage />}
              {activeMenu === "data-source" && <DataSourcePage />}
              {activeMenu === "api-based-extension" && (
                <ApiBasedExtensionPage />
              )}
              {activeMenu === "custom" && <CustomPage />}
              {activeMenu === "language" && <LanguagePage />}
            </div>
          </div>
        </div>
      </div>
    </MenuDialog>
  );
}
